<template>
  <div class="register">
    <p class="item-warp">
      <input type="text"
             placeholder="请输入昵称 1-10位中文\数字\字母"
             :class="{'hint':nickName.hit}"
             v-model="nickName.value">
      <i class="iconfont icon-1 "></i>
    </p>
    <p class="item-warp">
      <input type="text"
             placeholder="请输入账号 5-10为数字或字母"
             v-model="acc.value"
             :class="{'hint':acc.hit}">
      <i class="iconfont icon-yonghu"></i>
    </p>

    <p class="item-warp">
      <input type="password"
             placeholder="请输入密码 5-10为数字或字母"
             :class="{'hint':pwd.hit}"
             v-model="pwd.value">
      <i class="iconfont icon-lock"></i>
    </p>
    <p class="item-warp">
      <input type="password"
             placeholder="请再次输入密码"
             :class="{'hint':r_pwd.hit}"
             v-model="r_pwd.value">
      <i class="iconfont icon-zaici"></i>
    </p>
    <p class="item-warp">
      <Checkbox v-model="single">同意用户协议</Checkbox>
    </p>
    <!-- <p class="item-warp">

      <Verify @success="alert('success')" @error="alert('error')" :type="1"></Verify>
    </p> -->
    <p class="item-warp">
      <Button type="error"
              @click.native="register">注册</Button>
    </p>

  </div>
</template>

<script>
// import Verify from 'vue2-verify'

import { register } from 'server/front_k.js'
export default {
  data() {
    return {
      single: true,
      nickName: {
        value: '',
        hit: false
      },
      acc: {
        value: '',
        hit: false
      },
      pwd: {
        value: '',
        hit: false
      },
      r_pwd: {
        value: '',
        hit: false
      },
      // isRest:true
    }
  },
  methods: {
    register() {
      if (!this.single) {
        return this.$Message.error('请先同意用户协议')
      }

      if (!this.$rex.name(this.nickName.value)) {
        return this.$Message.error('用户名格式错误， 应为 1-10位中文数字字母')
      }
      if (!this.$rex.acc(this.acc.value)) {
        return this.$Message.error('账号格式错误，应为5-10位数字或字母')
      }
      if (!this.$rex.acc(this.pwd.value)) {
        return this.$Message.error('密码格式错误，应为5-10位数字或字母')
      }
      if (this.pwd.value != this.r_pwd.value) {
        return this.$Message.error('两次密码输入不相符')
      }
      // this.$Message.success('通过验证')
      const data = {
        acc: this.acc.value,
        pwd: this.pwd.value,
        nickname: this.nickName.value
      }

      register(data).then(res => {

        if (res.err_code == 1000) {
          this.$Message.success('注册成功')
          this.reset()
          this.$emit('success')
          return
        }
        this.$Message.error(res.message)
      })
    },
    reset() {
      this.nickName = {
        value: '',
        hit: false
      }
      this.acc = {
        value: '',
        hit: false
      }
      this.pwd = {
        value: '',
        hit: false
      }
      this.r_pwd = {
        value: '',
        hit: false
      }
    }
  },
  watch: {
    acc: {
      handler(v1) {
        this.acc.hit = !this.$rex.acc(v1.value)
      },
      deep: true
    },
    pwd: {
      handler(v1) {
        this.pwd.hit = !this.$rex.acc(v1.value)
      },
      deep: true
    },
    nickName: {
      handler(v1, v2) {
        this.nickName.hit = !this.$rex.name(v1.value)
      },
      deep: true
    }
  },
  components: {
    // Verify
  }
}
</script>

<style scoped>
.item-warp {
  margin: 10px 0;
  height: 40px;
  padding: 0 50px;
  position: relative;
}
.item-warp input {
  width: 100%;
  height: 100%;
  border: rgb(189, 189, 189) 1px solid;
  padding-left: 45px;
}
.item-warp button {
  width: 100%;
  background-color: rgb(228, 57, 60);
  border-radius: 1px;
  /* margin: 20px 0; */
}
.item-warp i {
  position: absolute;
  left: 50px;
  top: 0;
  height: 40px;
  width: 40px;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  border: 1px solid rgb(189, 189, 189);
  background-color: rgb(244, 244, 244);
}

.item-warp input:focus {
  border-color: #aaa;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
}

.register .item-warp .hint {
  border-color: rgb(226, 32, 24);
  box-shadow: 1px 0 5px rgba(226, 32, 24, 0.5);
}
</style>
<style >
.register .ivu-checkbox-checked .ivu-checkbox-inner {
  background-color: #e4393c;
  border-color: #e4393c;
}
</style>